<script>
import { reactive } from "vue";
import { getDicMap } from "@/utils/storage";
import { useTzRouter } from "@/vhooks/useTzRouter";

export default {
  name: "CcrnTransport",
  components: {},
  setup() {
    const { navigateBack, route } = useTzRouter();
    const dicMap = getDicMap();
    const state = reactive({
      transportForm: {},
    });

    if (
      route.query?.transhipmentInfo &&
      route.query.transhipmentInfo !== "undefined"
    ) {
      state.transportForm = JSON.parse(route.query.transhipmentInfo);
    }

    // 是否空字符串
    const isEmpty = (str) => {
      if (typeof str === "number") {
        str = str.toString();
      }
      return (
        str === null || str === undefined || str.trim() === "" || str === "null"
      );
    };

    // 验证表单数据
    const isValidate = () => {
      const { modeOfTransport, estDepArrDt, masterNo } = state.transportForm;
      try {
        if (isEmpty(modeOfTransport)) {
          throw new Error("请选择运输方式");
        }
        if (isEmpty(estDepArrDt)) {
          throw new Error("请选择预计到达/出发日期");
        }
        if (isEmpty(masterNo)) {
          throw new Error("请输入主提单编号");
        }
        return true;
      } catch (err) {
        $TzNotify.danger(err.message);
        return false;
      }
    };

    const handleSubmit = () => {
      // 有输入至少一项
      const isWrote = Object.values(state.transportForm).some((item) => !!item);
      if (isWrote) {
        if (isValidate()) {
          navigateBack({
            delta: 1,
            event: {
              type: "transportBack",
              data: {
                ...state.transportForm,
              },
            },
          });
        }
      } else {
        // 没有输入数据，带 null 清空转运信息
        navigateBack({
          delta: 1,
          event: {
            type: "transportBack",
            data: null,
          },
        });
      }
    };

    return () => (
      <tz-view class="ccrn-transport">
        <tz-view class="form-block">
          <tz-form class="base-form">
            <tz-cell title="多模式转运货物参考编号" border>
              <tz-input
                v-model={state.transportForm.imtfRefNo}
                type="text"
                placeholder="请输入多模式转运货物参考编号"
                clearable
                maxlength="35"
              />
            </tz-cell>
            <tz-cell title="运输方式" border required>
              <tz-picker
                v-model={state.transportForm.modeOfTransport}
                mode="selector"
                range={[{ code: "", nameCn: "请选择" }].concat(
                  dicMap.modeOfTransportList
                )}
                rangeKey="nameCn"
                valueKey="code"
              ></tz-picker>
            </tz-cell>
            <tz-cell title="船名" border>
              <tz-input
                v-model={state.transportForm.vessel}
                type="text"
                placeholder="请输入船名"
                clearable
                maxlength="35"
              />
            </tz-cell>
            <tz-cell title="航班(航次)号" border>
              <tz-input
                v-model={state.transportForm.convNo}
                type="text"
                placeholder="请输入航班(航次)号"
                clearable
                maxlength="17"
              />
            </tz-cell>
            <tz-cell title="预计到达/出发日期" border required>
              <tz-picker v-model={state.transportForm.estDepArrDt} mode="date">
                <tz-view class="date-picker-slot">
                  <tz-text>
                    {state.transportForm.estDepArrDt ? (
                      <text>{state.transportForm.estDepArrDt}</text>
                    ) : (
                      <text class="placeholder">点击选择日期</text>
                    )}
                  </tz-text>
                  <tz-icon class="tz-input-icon" name="calendar"></tz-icon>
                </tz-view>
              </tz-picker>
              {state.transportForm.estDepArrDt && (
                <tz-icon
                  onClick={(e) => {
                    e.stopPropagation();
                    state.transportForm.estDepArrDt = "";
                  }}
                  class="date-picker-close"
                  name="close"
                ></tz-icon>
              )}
            </tz-cell>
            <tz-cell title="主提单编号" border required>
              <tz-input
                v-model={state.transportForm.masterNo}
                type="text"
                placeholder="请输入主提单编号"
                clearable
                maxlength="35"
              />
            </tz-cell>
            <tz-cell title="副提单编号" border>
              <tz-input
                v-model={state.transportForm.houseNo}
                type="text"
                placeholder="请输入副提单编号"
                clearable
                maxlength="35"
              />
            </tz-cell>
          </tz-form>
        </tz-view>
        <tz-view class="btn-wrap">
          <tz-button type="primary" onClick={handleSubmit}>
            保存
          </tz-button>
        </tz-view>
      </tz-view>
    );
  },
};
</script>

<style lang="scss">
.ccrn-transport {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .form-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    .form-block-title {
      padding: 13px 0 13px 21px;
      color: $title-color;
    }
    .tz-form {
      background-color: $white;
      .tz-cell {
        line-height: unset;
        .tz-cell-label {
          text-align: right;
          padding: 13px 20px 13px 0;
        }
        .tz-cell-value {
          padding-right: 20px;
          .first-icon {
            margin-right: 15px;
          }
          .tz-icon {
            font-size: 20px;
          }
        }
        .tz-picker {
          .placeholder {
            color: $placeholder-color;
          }
          .date-picker-slot {
            display: flex;
            align-items: center;
            .tz-text {
              flex: 1;
            }
          }
        }
        .date-picker-close {
          margin-left: 14px;
          color: $text-color;
        }
        .tz-icon-scan {
          color: $info-color-active;
        }
        &.arrow-cell {
          .tz-cell-value {
            justify-content: flex-end;
          }
        }
      }
    }
  }
  .btn-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 28px 20px 0;
    .tz-button {
      width: 335px;
    }
  }
}
</style>
